<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 320px;
    margin: 10px auto;
    background: #ddd;
    position: relative;
  }

  h2 {
    position: relative;
    line-height: 30px;
    margin: 10px 0;
  }

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pesudo {
    position: absolute;
    width: 100%;
    height: 30px;
    overflow: hidden;
    top: 0;
    background: #ddd;
    text-align: center;
  }
</style>

<!-- 单行居中显示文字，多行居左显示，最多两行超过用省略号结尾 -->
<!-- 这样最多显示单行且样式为居中的 class="pesudo" p 标签就重叠到了原本的 p 标签之上。表现为单行居中，多行时第一行则铺满，解决了我们的问题。多行省略与方法一相同 -->
<div class="container">
  <h2>
    <!-- <p>我是单行标题居中</p> -->
    <p class="pesudo">我是单行标题居中</p>
  </h2>

  <h2>
    <p>我是两行标题两行标题两行标题居左</p>
    <p class="pesudo">我是两行标题两行标题两行标题居左</p>
  </h2>

  <h2>
    <p>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略</p>
    <p class="pesudo">我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略</p>
  </h2>
</div>